<template>
  <div class="mod-order-order">
    <el-form>
      <el-form-item label="订单编号">
        <el-input v-model="a" placeholder="订单编号"></el-input>
      </el-form-item>
      <el-form-item label="下单日期">
        <el-date-picker v-model="b" value-format="yyyy-MM-dd HH:mm:ss" type="datetimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
      </el-form-item>
      <el-form-item label="订单状态">
        <el-select v-model="c" placeholder="请选择订单状态">
          <el-option label="待付款" value="1"></el-option>
          <el-option label="待发货" value="2"></el-option>
          <el-option label="待收货" value="3"></el-option>
          <el-option label="待评价" value="4"></el-option>
          <el-option label="成功" value="5"></el-option>
          <el-option label="失败" value="6"></el-option>
        </el-select>
      </el-form-item>
      <div>
        <div class="el-for" style="margin-left:initial">
          <el-button @click="one" style="padding: 9px 15px;font-size: 12px;" icon="el-icon-search" type="primary">查询</el-button>
          <el-button @click="two" style="padding: 9px 15px;font-size: 12px;" type="primary">导出代发货订单</el-button>
          <el-button @click="three" style="padding: 9px 15px;font-size: 12px;" type="primary">导出销售记录</el-button>
          <el-button @click="fore" style="padding: 9px 15px;font-size: 12px;" >清空</el-button>
        </div>
      </div>
    </el-form>
    <!-- 数据 -->
    <div class="main">
      <div class="content">
        <!-- 标题 -->
        <div class="tit">
          <div class="el-row" style="width: 100%;">
            <div class="el-col el-col-10"><span class="item product">商品</span></div>
            <div class="el-col el-col-3"><span class="item">成交单价/购买数量</span></div>
            <div class="el-col el-col-3"><span class="item">实付金额</span></div>
            <div class="el-col el-col-3"><span class="item">支付方式</span></div>
            <div class="el-col el-col-3"><span class="item">订单状态</span></div>
            <div class="el-col el-col-2"><span class="item">操作</span></div>
          </div>
        </div>
        <!-- 商品 -->
        <div class="prod" v-for="(item,index) in arr" :key="index">
          <div class="prod-tit"><span>订单编号:{{item.orderNumber}}</span><span>下单时间:{{item.createTime}}</span></div>
          <div class="prod-cont">
            <div class="el-row" style="width: 100%;">
              <div class="el-col el-col-12">
                <div class="prod-item">
                  
                    <div v-for="(item,index) in item.orderItems" :key="index">
                      <div class="items name" >
                        <div class="prod-image"><img :src="`http://admin.yami.byesame.com/apis/mall4j/img/${item.pic}`" style="height: 100px; width: 100px;"></div>
                      <div class="prod-name"><span>{{item.prodName}}</span><span class="prod-info">{{item.skuName}}</span></div>
                      <div class="prod-price"><span>￥{{item.price}}</span><span>x{{item.prodCount}}</span></div>
                      </div>
                    </div>
                </div>
              </div>
              <div class="el-col el-col-3" style="height: 100%;">
                <div class="item">
                  <div>
                    <span class="totalprice">￥{{item.orderItems[0].price*item.productNums}}</span>
                      <span>共{{item.orderItems[0].prodCount}}件</span>
                  </div>
                </div>
              </div>
              <div class="el-col el-col-3" style="height: 100%;">
                <div class="item">
                  <div>
                    <span v-if="item.isPayed == 1">微信支付</span>
                    <span v-if="item.isPayed == 0">手动代扣</span>
                  </div>
                </div>
              </div>
              <div class="el-col el-col-3" style="height: 100%;">
                <div class="item">
                  <span v-if="item.status==1" size="small" type="danger">待付款</span>
                  <span v-if="item.status==2" size="small" type="danger">待发货</span>
                  <span v-if="item.status==3" size="small" type="danger">待收货</span>
                  <span v-if="item.status==4" size="small" type="danger">待评价</span>
                  <span v-if="item.status==5" size="small" type="danger">成功</span>
                  <span v-if="item.status==6" size="small" type="danger">失败</span>
                </div>
              </div>
              <div class="el-col el-col-3" style="height: 100%;">
                <div class="item">
                  <div class="operate">
                      <span @click="xhm(item.orderNumber)">查看</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="remark"><div class="buyer-remark"><span>备注:{{item.remarks}}</span></div></div>
        </div>
      </div>
    </div>
    <div class="empty-tips">暂无数据</div>
    <!-- 分页器 -->
    <div class="avue-crud__pagination">
      <el-pagination background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage4"
        :page-sizes="[10, 20,50,100]"
        :page-size="10"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>
    <!-- 导出待支付模态框 -->
    <el-dialog title="请输入发货信息" :visible.sync="dialogVisible" width="38%" :before-close="handleClose">
      <el-form :rules="rules">
        <el-form-item prop="a" class="ee" style="width:100%" label="发件人姓名">
          <el-input v-model="ea"></el-input>
        </el-form-item>
        <el-form-item prop="b" class="ee" style="width:100%" label="发货人手机号">
          <el-input v-model="eb"></el-input>
        </el-form-item>
        <el-form-item prop="c" class="ee" style="width:100%" label="发货地址">
          <el-input v-model="ec"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="f">取 消</el-button>
        <el-button type="primary" @click="t">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 查看模态框 -->
    <el-dialog title="查看" :visible.sync="dialogTableVisible" width="80%" :before-close="handleClose2">
      <el-form :data="chris">
        <div class="main2">
          <div class="content">
            <!-- 步骤条 -->
            <div class="order-number">
              <div class="num-cont">
                <el-form-item style="width: 100%;" label="订单编号:">
                  <span>{{chris.orderNumber}}</span>
                </el-form-item>
                <el-form-item style="width: 100%;">
                  <el-steps :active="active" align-center>
                    <el-step title="提交订单"></el-step>
                    <el-step title="买家已付款" :description="chris.payTime"></el-step>
                    <el-step title="卖家已发货" :description="chris.dvyTime"></el-step>
                    <el-step title="买家已收货" :description="chris.finallyTime"></el-step>
                  </el-steps>
                </el-form-item>
              </div>
            </div>
            <!-- 发货 -->
            <div class="order-state">
              <!-- 订单状态 -->
              <div class="state-cont">
                <div class="state-title">
                  <el-form-item label="订单状态">
                    <el-button style="padding: 4px 8px;font-size: 12px;" v-if="chris.status==1" plain type="warning">待付款</el-button>
                    <el-button style="padding: 4px 8px;font-size: 12px;" v-if="chris.status==2" plain type="warning">待发货</el-button>
                    <el-button style="padding: 4px 8px;font-size: 12px;" v-if="chris.status==3" plain type="warning">待收货</el-button>
                    <el-button style="padding: 4px 8px;font-size: 12px;" v-if="chris.status==4" plain type="warning">待评价</el-button>
                    <el-button style="padding: 4px 8px;font-size: 12px;" v-if="chris.status==5" plain type="warning">成功</el-button>
                    <el-button style="padding: 4px 8px;font-size: 12px;" v-if="chris.status==6" plain type="warning">失败</el-button>
                  </el-form-item>
                  <el-form-item>
                    <el-button v-if="chris.status==2" type="primary" plain>发货</el-button>
                  </el-form-item>
                </div>
              </div>
              <!-- 买家付款 -->
              <div class="order-info">
                <!-- 左边 -->
                <div class="order-details">
                  <div class="detail-title">
                    <img src="@/assets/img/car.png" alt="">
                    <span class="prompt">买家付款后才可以发货</span>
                  </div>
                  <div class="detail-cont">
                    <div class="detail01">
                      <img src="@/assets/img/address.png" alt="">
                      <div class="text-width">
                        <el-form-item style="width: 100%;" label="收货人:">
                          <span>{{yyy.receiver}}</span>
                        </el-form-item>
                        <el-form-item style="width: 100%;" label="手机:">
                          <span>{{yyy.mobile}}</span>
                        </el-form-item>
                        <el-form-item style="width: 100%;" label="收货地址:">
                          <span>{{yyy.province+`${yyy.city}`+`${yyy.area}`+`${yyy.addr}`}}</span>
                        </el-form-item>
                      </div>
                    </div>
                    <div class="detail01">
                      <img src="@/assets/img/invoice.png" alt="">
                      <span>不开发票</span>
                    </div>
                  </div>
                </div>
                <!-- 右边 -->
                <div class="buyers">
                  <div class="detail-title">
                    <img src="@/assets/img/buyer.png" alt="">
                    <el-form-item style="margin-top: 22px;" label="买家:">
                      <span></span>
                    </el-form-item>
                  </div>
                  <div class="buyers-info">
                    <div class="detail02">
                      <img src="@/assets/img/message.png" alt="">
                      <div class="text-width">
                        <span>买家备注:{{chris.remarks}}</span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <!-- 商品 -->
              <div class="item-list">
                <el-table border :data="shop">
                  <el-table-column prop="orderItems[0]" label="商品"  header-align="left">
                      <!-- <template slot-scope="scope"> -->
                        <div class="prod-con" v-for="(item,index) in shop" :key="index">
                        <img :src="`http://admin.yami.byesame.com/apis/mall4j/img/${item.orderItems.pic}`" alt="" style="width:100px;height:100px">
                        <span>{{item.prodName}}</span>
                        </div>
                      <!-- </template> -->
                  </el-table-column>
                  <el-table-column :data="shop.orderItems" prop="price" header-align="center" width="180" label="单价">
                    <span v-for="(item,index) in shop" :key="index">{{item.orderItems[index].price}}</span>
                  </el-table-column>
                  <el-table-column  header-align="center" width="180" label="数量">
                    <span v-for="(item,index) in shop" :key="index">{{item.productNums}}</span>
                  </el-table-column>
                  <el-table-column  header-align="center" width="180" label="总价">
                    <span>{{f3}}</span>
                  </el-table-column>
                </el-table>
              </div>
              <!-- 总价 -->
              <div class="item-info">
                <el-form-item style="width: 100%;" label="商品总价:">
                  <span>{{f1*f2}}</span>
                </el-form-item>
                <el-form-item style="width: 100%;" label="应付金额:">
                  <span>{{f1*f2}}</span>
                </el-form-item>
              </div>
            </div>
            <!-- 订单日志 -->
            <div class="order-log">
              <div class="log-title"><span>订单日志</span></div>
              <div style="color: #4395ff;">
                <el-form-item style="width:100%">
                  <span v-if="chris.updateTime !=null ">{{chris.updateTime}}  订单更新（成功）</span>
                </el-form-item>
                <el-form-item style="width:100%">
                  <span v-if="chris.payTime !=null ">{{chris.payTime}}  订单付款（成功）</span>
                </el-form-item>
                <el-form-item style="width:100%">
                  <span v-if="chris.dvyTime !=null ">{{chris.dvyTime}}  订单发货（成功）</span>
                </el-form-item>
                <el-form-item style="width:100%">
                  <span v-if="chris.finallyTime !=null ">{{chris.finallyTime}}  完成订单（成功）</span>
                </el-form-item>
                <el-form-item style="width:100%">
                  <span v-if="chris.cancelTime !=null ">{{chris.cancelTime}}  取消订单（成功）</span>
                </el-form-item>
              </div>
            </div>
          </div>
        </div>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import * as xlsx from 'xlsx' //引入xlsx
export default {
  data(){
    return{
      // 订单等值
      a:"",
      b:"",
      c:"",
      arr:[],
      abb:[],
      // 分页器
      currentPage4:1,
      total:0,
      shu:1,
      ye:10,
      // 时间戳
      timestamp:Math.floor(Date.now() / 1000),
      // 页数
      ggb : 1,
      par:{
        orderNumber:"",
        status:"",
        startTime:"",
        endTime:""
      },
      // 导出待支付模态框
      dialogVisible:false,
      // 查看模态框
      dialogTableVisible:false,
      // 查看模态框数组
      chris:[],
      // 地址模态框
      yyy:[],
      // 信息模态框
      ppp:[],
      // 商品模态框
      shop:[],
      // 单价
      f1:"",
      // 数量
      f2:"",
      // 总价
      f3:"",
      parts:"",
      // 模态框值
      ea:"",
      eb:"",
      ec:"",
      rules: {
        a: [
          { required: true, message: '请输入发件人姓名', trigger: 'blur' }
        ],
        b: [
          { required: true, message: '请输入发货人手机号', trigger: 'blur' }
        ],
        c: [
          { required: true, message: '请输入发货地址', trigger: 'blur' }
        ],
      },
      // 步骤条
      active:0
    }
  },
  created(){
    this.getList()
  },
  methods:{
    getList(){
      this.$http.get("http://admin.yami.byesame.com/apis/order/order/page",{params:{
        current:1,
        size:10
      }}).then((res)=>{
        this.total = res.data.total
        this.arr = res.data.records
        this.chris = res.data.records[0]
      })
    },
    // 时间戳
    formattedDate() {
      this.timestamp = Math.floor(Date.now() / 1000);
    },
    // 控制步骤条
    next(){
      if (this.active > 4){
        this.active = 0
      } 
    },
    // 分页器 每页条数
    handleSizeChange(val){
      this.$http.get("http://admin.yami.byesame.com/apis/order/order/page",{params:{
        current:this.shu,
        size:val
      }}).then((res)=>{
        this.arr = res.data.records
      })
    },
    // 分页器 当前页
    handleCurrentChange(val){
      this.shu = val-1
      this.$http.get("http://admin.yami.byesame.com/apis/order/order/page",{params:{
        current:this.shu,
        size:this.ye
      }}).then((res)=>{
        this.arr = res.data.records
      })
    },
    // 查询
    one(){
      // 为par赋值
      this.par.orderNumber = this.a,
      this.par.status = this.c,
      this.par.startTime = this.b[0],
      this.par.endTime = this.b[1]
      this.$http.get("http://admin.yami.byesame.com/apis/order/order/page",{params:{
        current:1,
        size:10,
        orderNumber:this.par.orderNumber,
        status:this.par.status,
        startTime:this.par.startTime,
        endTime:this.par.endTime
      }}).then((res)=>{
        this.arr = res.data.records
        this.total = res.data.total
      })
    },
    // 导出待发货订单
    two(){
      this.dialogVisible = true
    },
    // 空白关闭
    handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
    },
    // 查看空白关闭
    handleClose2(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
          this.shop.splice(0,1)
    },
    // 导出销售记录
    three(){
      // this.$http.get("http://admin.yami.byesame.com/apis/order/order/soldExcel",{params:{
      //   t:this.timestamp
      // }}).then((res)=>{
      //   console.log(res);
      // })
      this.$http.get("http://admin.yami.byesame.com/apis/order/order/page",{params:{
        current:this.ggb,
        size:this.total
      }}).then((res)=>{
        this.abb=res.data.records
        let list = []
        for(let i = 0;i<this.abb.length;i++){
          let obj ={
            "订单编号":this.abb[i].orderNumber,
            "下单时间":this.abb[i].createTime,
            "收件人":this.abb[i].userAddrOrder.receiver,
            "手机":this.abb[i].userAddrOrder.mobile,
            "收货地址":this.abb[i].userAddrOrder.province+`${this.abb[i].userAddrOrder.city}`+`${this.abb[i].userAddrOrder.area}`+`${this.abb[i].userAddrOrder.addr}`,
            "商品名称":this.abb[i].prodName,
            "数量":this.abb[i].prodCount,
            "订单应付":this.abb[i].orderItems[0].price*this.abb[i].productNums,
          }
          list.push(obj)
        }
        console.log(list);
        // // 根据现有数据 生成一个新的数组 以中文作为key 然后在导出
        const worksheet = xlsx.utils.json_to_sheet(list)//传入要导出的表格数据
        const workbook = xlsx.utils.book_new()
        xlsx.utils.book_append_sheet(workbook,worksheet,"data")//data为自定义表格
        xlsx.writeFile(workbook,"销售信息整理.xlsx")//one.xlsx 文件名
      })
    },
    // 清空
    fore(){
      this.a = ""
      this.b = ""
      this.c = ""
      this.getList()
    },
    // 模态框取消
    f(){
      this.dialogVisible = false
    },
    // 模态框确定
    t(){
      // 不为空时
      if(this.ea != "" && this.eb != "" && this.ec != ""){
        // 成功调用请求
        this.$http.get("http://admin.yami.byesame.com/apis/order/order/page",{params:{
        current:this.ggb,
        size:this.total
      }}).then((res)=>{
        let arr = []
        for(let i =0;i<res.data.records.length;i++){
          if(res.data.records[i].status ==2){
            arr.push(res.data.records[i])
          }
        }
        let list = []
          for(let i = 0;i<arr.length;i++){
            let obj ={
              "订单编号":arr[i].orderNumber,
              "收件人":arr[i].userAddrOrder.receiver,
              "手机":arr[i].userAddrOrder.mobile,
              "收货地址":arr[i].userAddrOrder.province+`${arr[i].userAddrOrder.city}`+`${arr[i].userAddrOrder.area}`+`${arr[i].userAddrOrder.addr}`,
              "商品名称":arr[i].prodName,
              "数量":arr[i].orderItems[0].prodCount,
              "发件人姓名":this.ea,
              "发件人手机号":this.eb,
              "发货地址":this.ec,
              "备注":arr[i].remarks,
            }
            list.push(obj)
          }
          // // 根据现有数据 生成一个新的数组 以中文作为key 然后在导出
          const worksheet = xlsx.utils.json_to_sheet(list)//传入要导出的表格数据
          const workbook = xlsx.utils.book_new()
          xlsx.utils.book_append_sheet(workbook,worksheet,"data")//data为自定义表格
          xlsx.writeFile(workbook,"发货信息整理.xlsx")//one.xlsx 文件名
          this.dialogVisible = false
      })
      // 为空时
      }else{
        this.$message.error('请输入发件人姓名,发货人手机号和发货地址');  
      }
    },
    // 查看模态框
    xhm(row){
      console.log(row);
      this.dialogTableVisible = true
      this.$http.get(`http://admin.yami.byesame.com/apis/order/order/orderInfo/${row}`,{params:{
        t:this.timestamp
      }}).then((res)=>{
        this.chris = res.data
        // 地址信息
        this.yyy = res.data.userAddrOrder
        // 发货信息
        this.ppp = res.data.orderItems
        this.active = res.data.status
        console.log(res.data);
        this.shop.push(res.data);
        this.next()
        console.log(this.shop[0]);
        // 单价
        this.f1 = res.data.orderItems[0].price
        // 数量
        this.f2 = res.data.productNums
        // 总价
        this.f3 = this.f1* this.f2
        if(this.shop[0].orderItems.length>1){
          this.parts = this.shop[0].prodName.split(',')
        }
        console.log(this.parts);
      })
    }
  }
}
</script>

<style scoped>
>>>.el-form-item{
  display: inline-block!important;
  margin-right: 10px;
  vertical-align: top;
  margin-bottom: 22px;
}
>>>.el-input__inner{
  height: initial!important;
}
>>>.el-form-item__label{
  width: 80px!important;
}
.el-form-item{
  margin-left: initial !important;
}
.el-form--inline .el-form-item__content {
  display: inline-block;
  vertical-align: top;
}
.el-form-item__content {
  line-height: 40px;
  position: relative;
  font-size: 14px;
}
.main {
  height: 100%;
  width: 100%;
  font: 14px Arial, PingFang SC, Hiragino Sans GB, STHeiti, Microsoft YaHei, WenQuanYi Micro Hei, sans-serif;
  color: #495060;
}
.mod-order-order .tit {
  display: flex;
  height: 45px;
  align-items: center;
}
.el-row {
  box-sizing: border-box;
}
.content {
  margin: 0 20px;
}
/* 数据 */
.el-col-10 {
  width: 39.66667%;
}
[class*=el-col-] {
  float: left;
  box-sizing: border-box;
}
.el-col-3 {
  width: 12.5%;
}
.el-col-2 {
  width: 8.33333%;
}
.mod-order-order .prod-tit {
  padding: 10px;
  background: #f8f8f9;
  border-left: 1px solid #dddee1;
  border-top: 1px solid #dddee1;
  border-right: 1px solid #dddee1;
}
.mod-order-order .prod-cont {
  display: flex;
  border-top: 1px solid #dddee1;
  border-bottom: 1px solid #dddee1;
  border-left: 1px solid #dddee1;
  color: #495060;
}
.mod-order-order .prod .remark {
  width: 100%;
  height: 50px;
  line-height: 50px;
  background-color: #e8f7f6;
  border-left: 1px solid #dddee1;
  border-right: 1px solid #dddee1;
  border-bottom: 1px solid #dddee1;
  margin-bottom: 20px;
}
.el-row {
  box-sizing: border-box;
}
.el-col-12 {
  width: 50%;
}
.mod-order-order .prod-cont .prod-item {
  display: flex;
  flex-direction: column;
  border-right: 1px solid #dddee1;
}
.mod-order-order .prod-cont .items.name:last-child {
  border-bottom: none;
}
.mod-order-order .prod-cont .items.name {
  display: flex;
  position: relative;
  padding: 20px;
  border-bottom: 1px solid #dddee1;
}
.mod-order-order .prod-image {
  margin-right: 20px;
  width: 100px;
  height: 100px;
}
.mod-order-order .prod-name {
  width: 55%;
  text-align: left;
}
.mod-order-order .prod-price {
  position: absolute;
  right: 40px;
  text-align: right;
}
.mod-order-order .prod-name .prod-info {
  display: block;
  color: #80848f;
  margin-top: 30px;
}
.el-col-3 {
  width: 12.5%;
}
.mod-order-order .prod-cont .item {
  display: flex;
  display: -webkit-flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  border-right: 1px solid #dddee1;
  text-align: center;
  height: 100%;
}
.mod-order-order .prod-cont .item span {
  display: block;
}
.mod-order-order .item .totalprice {
  color: #c00;
}
.mod-order-order .item span {
  display: block;
  margin-bottom: 10px;
}
.mod-order-order .prod-cont .item span {
  display: block;
}
.mod-order-order .item span {
  display: block;
  margin-bottom: 10px;
}
.mod-order-order .item .operate {
  color: #2d8cf0;
}
.mod-order-order .buyer-remark {
  padding: 0 20px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.mod-order-order .prod-price span {
  display: block;
  margin-bottom: 10px;
}
/* 暂无数据 */
.mod-order-order .empty-tips {
  display: block;
  width: 100%;
  text-align: center;
  margin: 50px 0;
  color: #999;
}
/* 模态框 */
>>>.ee .el-form-item__label{
  width: 120px!important;
}
>>>.ee .el-form-item__content{
  margin-left: 120px!important;
}
/* 查看模态框 */
.main2 {
  height: 100%;
  width: 100%;
  font: 14px Arial, PingFang SC, Hiragino Sans GB, STHeiti, Microsoft YaHei, WenQuanYi Micro Hei, sans-serif;
  color: #495060;
}
/* 发货 */
.content .order-state {
  position: relative;
  margin-top: 50px;
  border-bottom: 1px solid #e9eaec;
}
.order-state .state-title {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.order-state .order-info {
  width: 100%;
  border-top: 1px solid #e9eaec;
  margin: 50px 0;
  display: flex;
}
.order-info .order-details {
  width: 50%;
  border-right: 1px solid #e9eaec;
}
.order-info .buyers {
  width: 50%;
  margin-left: 20px;
}
.order-info .detail-title {
  height: 50px;
  line-height: 50px;
  display: flex;
  align-items: center;
}
.order-info img {
  width: 18px !important;
  height: 18px !important;
  margin-right: 15px;
}
.order-info .detail-cont {
  border-top: 1px dashed #e9eaec;
  margin: 15px 20px 0 0;
}
.order-info .detail-cont {
  position: relative;
}
.detail01 .text-width, .detail02 .text-width {
  width: 100%;
}
.detail-cont .detail01 {
  display: flex;
  height: 100%;
  line-height: 25px;
  margin-top: 15px;
}
.buyers .detail02 {
  display: flex;
  height: 100%;
  line-height: 25px;
  margin-top: 15px;
}
>>>.buyers .el-form-item__label{
  width: initial!important;
}
.order-state .item-info {
  padding-left: 80%;
  margin: 25px 0;
}
.item-info .text {
  position: absolute;
  right: 0;
}
.order-log .log-title {
  height: 50px;
  width: 100%;
  line-height: 50px;
  font-weight: 700;
}
>>>.order-log .el-form-item__content{
  margin-left: 10px !important;
}
.item-list .prod-con {
  display: flex;
}
</style>